<template>
  <n-el :id="props.id" tag="div" class="hz_header" :style="{
    width:  props.width,
    height: props.height
  }"
        :class="props.titleIndex === 1 ? 'title1' : 'title2'"
  >
    <span>
      <slot>
        {{ titleData }}
      </slot>
    </span>
  </n-el>
</template>

<script lang="ts" name="HzTop4" setup>

// eslint-disable-next-line no-undef
import {loadEchartsData} from "/@api/hz-bigscreen-api";

const props = defineProps({
  id: {
    type: String,
    default: 'hz-top-4'
  },
  titleIndex: {
    type: Number,
    default: 1
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  title: {
    type: String,
    default: ''
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'hzTop'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  },
});

const titleData = ref(props.title)

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data:any) => {
  titleData.value = data.title
};
// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  refreshChartsByApi
});

</script>

<style scoped lang="less">
.hz_header{
  background: url("src/assets/hz-top/4/title1.png") no-repeat;
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title1{
  background: url("/@assets/hz-top/4/title1.png") no-repeat;
  background-size: 100% 100%;
}

.title2{
  background: url("/@assets/hz-top/4/title2.png") no-repeat;
  background-size: 100% 100%;
}

.hz_header span{
  color: #fff;
  font-size: calc(60px * 0.60);
}
</style>
